<template>
	<view>
		<uni-row class="demo-uni-row" v-for="(item,index) in list">
			<image :src="item.src" class="item-image" mode="scaleToFill" @click="open(index)"></image>
		</uni-row>
		<uni-popup ref="popup" :mask-click="false">
			<view class="pop-view">
				<view class="pop-title">
					<image src="../../../static/home/peizhuang/left-line.png" class="line-image"></image>
					<text class="title-text">{{selectType_text}}</text>
					<image src="../../../static/home/peizhuang/right-line.png" class="line-image"></image>
				</view>
				<view class="pop-title-close">
					<image class="close-btn" src="../../../static/home/peizhuang/×.png" @click="close"></image>
				</view>
				<view class="pop-line"></view>
				<view class="pop-chose">
					<view class="pop_type_items" :style="Pop_style"
						v-for="(item,index) in menpailists[choose_type]" @click="ChangeBangType(index)">
						<view clas="types">
							<image class="pop_type_item select_item" v-if="selectTypeIndex===index" :src="item"></image>
							<image class="pop_type_item unselect_item" v-else :src="item"></image>
							<text class="item_text">{{list[choose_type].branch[index]}}</text>
						</view>
					</view>

				</view>
				<button type="default" @click="goto" class="btn">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				selectType_text: "选择流派",
				choose_type: 0,
				Pop_style:"width:100%",
				selectTypeIndex: 0,
				menlist: [],
				menpailists: [],
				list: []
			}
		},
		onLoad(option) {
			console.log(option.type)
			this.list = this.$Global.JobType
			this.menpailists = this.$Global.MengPai_FZ_icon
			this.changeType = option.type
			this.getStyle(this.selectTypeIndex)
			if (this.changeType == 0) {
				this.selectType_text = "选择流派1"
			} else if (this.changeType == 1) {
				this.selectType_text = "选择流派2"
			} else if (this.changeType == 2) {
				this.selectType_text = "选择流派3"
			} else if (this.changeType == 3) {
				this.selectType_text = "选择流派4"
			} else {
				this.selectType_text = "选择流派5"
			}
		},
		methods: {
			open(index) {
				console.log(index)
				this.choose_type = index
				let je = "url" + this.changeType
				let tiaozhuan = this.$Global.Gotolist
				this.url = tiaozhuan[index][je] + "&choose_type=" + this.choose_type + "&selectTypeIndex=" + this.selectTypeIndex
				this.selectTypeIndex = 0
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if(this.changeType== 0){
					this.goto()
				}else
				{
					this.$refs.popup.open("top")
				}

			},
			close() {
				this.$refs.popup.close()
			},
			goto() {
				console.log(this.url)
				uni.navigateTo({
					url: this.url
				})
			},
			getStyle(index) {
				var ge = 1 / this.menpailists[index].length * 100
				this.Pop_style= "width:" + ge + "%"
			},
			ChangeBangType(index) {
				this.selectTypeIndex = index
				let je = "url" + this.changeType
				let tiaozhuan = this.$Global.Gotolist
				this.url = tiaozhuan[this.choose_type][je] + "&choose_type=" + this.choose_type + "&selectTypeIndex=" + this.selectTypeIndex
			}
		}
	}
</script>

<style scoped>
	.demo-uni-row {
		padding-top: 10rpx;
		width: 100%;
		/* background-color: #0000FF; */
		margin-top: 20rpx;
		text-align: center;
	}

	.item-image {
		/* margin-left: 35rpx; */
		/* 		margin-right: 35rpx; */
		margin-left: 5%;
		width: 90%;
		width: 680rpx;
		height: 240rpx;
	}

	.pop-view {
		margin-left: 85rpx;
		margin-right: 85rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 400rpx;
	}

	.pop-view .pop-line {
		width: 100%;
		height: 1px;
		background-color: #DDDDDD;
		margin-top: 40rpx;
	}

	.pop-view .pop-title {
		text-align: center;
		margin-top: 440rpx;
		padding-top: 40rpx;
		padding-right: 10rpx;
	}

	.pop-view .pop-title .title-text {
		font-size: 36rpx;
		color: #2FABD7;
	}

	.pop-view .pop-title .line-image {
		height: 24rpx;
		width: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.pop-view .pop-title-close .close-btn {
		width: 29rpx;
		height: 29rpx;
		float: right;
		margin-top: -40rpx;
		margin-right: 40rpx;
	}

	.pop-view .btn {
		width: 226rpx;
		height: 80rpx;
		background-color: #57BEF2;
		border-width: 0px;
		color: #FFFFFF;
		line-height: 40px;
	}

	.pop-view .pop-chose {
		width: 100%;
		height: 250rpx;
		display: flex;
	}

	.pop-chose {
		width: 100%;
		text-align: center;
		overflow: scroll;
	}

	.pop_type_items {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: Center;
	}
	.types
	{
		width: 90rpx;
		height: 120rpx;
	}

	.pop_type_item {
		width: 90rpx;
		height: 90rpx;
	}
	.item_text
	{
		float: left;
		text-align: center;
		font-size: 23rpx;
		width: 100%;

	}

	.unselect_item {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
	}

</style>
